<template>
    <li>
        <label>
        <input type="checkbox" :checked="todo.done" @change="changeTodo(todo.id)"/>
        <span v-show="!todo.isEdit">{{todo.name}}</span>
        <input 
          type="text" 
          v-show="todo.isEdit" 
          :value="todo.name" 
          @blur="handleBlur($event,todo)"
          ref="inputTitle"
        >
        </label>
        <button class="btn btn-danger" @click="handelchange(todo.id)">删除</button>
        <button v-show="!todo.isEdit" class="btn btn-edit" @click="handleUpdate(todo)">编辑</button>
    </li>
        
</template>

<script>
export default {
    name:'MyItem',
    props:['todo'],
    methods:{
      changeTodo(id){
        // this.changeCheck(id)
        this.$bus.$emit('changeCheck',id)
      },
      handelchange(id){
        if(confirm('是否确定删除！')){
          // this.deleteTodo(id)
          this.$bus.$emit('deleteTodo',id)
        }
      },
      handleUpdate(todo){
        if(todo.hasOwnProperty('isEdit')){
          todo.isEdit = true
        }else{
          this.$set(todo,'isEdit',true)
        }
        this.$nextTick(function(){
          this.$refs.inputTitle.focus()
        })
      },
      handleBlur(e,todo){
        if(e.target.value.trim()===''){
          todo.isEdit = false
          return alert('输入不能为空！')
        } 
        this.$bus.$emit('updateTodo',todo.id,e.target.value)
        todo.isEdit = false
      }
    }
}
</script>

<style scoped>
/*item*/
  li {
    list-style: none;
    height: 36px;
    line-height: 36px;
    padding: 0 5px;
    border-bottom: 1px solid #ddd;
  }

  li label {
    float: left;
    cursor: pointer;
  }

  li label li input {
    vertical-align: middle;
    margin-right: 6px;
    position: relative;
    top: -1px;
  }

  li button {
    float: right;
    display: none;
    margin-top: 3px;
  }

  li:before {
    content: initial;
  }

  li:last-child {
    border-bottom: none;
  }

  li:hover {
    background-color: #ddd;
  }

  li:hover button{
    display:block
  }
</style>